import type { ComponentManifest } from '@inkline/inkline/types';

export const manifest: ComponentManifest = {
    name: 'Row',
    props: [
        {
            name: 'start',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row'
        },
        {
            name: 'start-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row on extra-small screens'
        },
        {
            name: 'start-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row on small screens'
        },
        {
            name: 'start-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row on medium screens'
        },
        {
            name: 'start-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row on large screens'
        },
        {
            name: 'start-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row on extra-large screens'
        },
        {
            name: 'start-xxl',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the start of the row on extra-extra-large screens'
        },
        {
            name: 'center',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row'
        },
        {
            name: 'center-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row on extra-small screens'
        },
        {
            name: 'center-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row on small screens'
        },
        {
            name: 'center-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row on medium screens'
        },
        {
            name: 'center-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row on large screens'
        },
        {
            name: 'center-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row on extra-large screens'
        },
        {
            name: 'center-xxl',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the center of the row on extra-extra-large screens'
        },
        {
            name: 'end',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row'
        },
        {
            name: 'end-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row on extra-small screens'
        },
        {
            name: 'end-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row on small screens'
        },
        {
            name: 'end-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row on medium screens'
        },
        {
            name: 'end-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row on large screens'
        },
        {
            name: 'end-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row on extra-large screens'
        },
        {
            name: 'end-xxl',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to the end of the row on extra-extra-large screens'
        },
        {
            name: 'top',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row'
        },
        {
            name: 'top-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row on extra-small screens'
        },
        {
            name: 'top-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row on small screens'
        },
        {
            name: 'top-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row on medium screens'
        },
        {
            name: 'top-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row on large screens'
        },
        {
            name: 'top-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row on extra-large screens'
        },
        {
            name: 'top-xxl',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the top of the row on extra-extra-large screens'
        },
        {
            name: 'middle',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row'
        },
        {
            name: 'middle-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row on extra-small screens'
        },
        {
            name: 'middle-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row on small screens'
        },
        {
            name: 'middle-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row on medium screens'
        },
        {
            name: 'middle-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row on large screens'
        },
        {
            name: 'middle-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row on extra-large screens'
        },
        {
            name: 'middle-xxl',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the middle of the row on extra-extra-large screens'
        },
        {
            name: 'bottom',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row'
        },
        {
            name: 'bottom-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row on extra-small screens'
        },
        {
            name: 'bottom-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row on small screens'
        },
        {
            name: 'bottom-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row on medium screens'
        },
        {
            name: 'bottom-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row on large screens'
        },
        {
            name: 'bottom-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row on extra-large screens'
        },
        {
            name: 'bottom-xxl',
            type: ['Boolean'],
            default: 'false',
            description: 'Align the content to the bottom of the row on extra-extra-large screens'
        },
        {
            name: 'around',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to have space around each item inside the row'
        },
        {
            name: 'around-xs',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space around each item inside the row on extra-small screens'
        },
        {
            name: 'around-sm',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space around each item inside the row on small screens'
        },
        {
            name: 'around-md',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space around each item inside the row on medium screens'
        },
        {
            name: 'around-lg',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space around each item inside the row on large screens'
        },
        {
            name: 'around-xl',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space around each item inside the row on extra-large screens'
        },
        {
            name: 'around-xxl',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space around each item inside the row on extra-extra-large screens'
        },
        {
            name: 'between',
            type: ['Boolean'],
            default: 'false',
            description: 'Justify the content to have space between each item inside the row'
        },
        {
            name: 'between-xs',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space between each item inside the row on extra-small screens'
        },
        {
            name: 'between-sm',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space between each item inside the row on small screens'
        },
        {
            name: 'between-md',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space between each item inside the row on medium screens'
        },
        {
            name: 'between-lg',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space between each item inside the row on large screens'
        },
        {
            name: 'between-xl',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space between each item inside the row on extra-large screens'
        },
        {
            name: 'between-xxl',
            type: ['Boolean'],
            default: 'false',
            description:
                'Justify the content to have space between each item inside the row on extra-extra-large screens'
        },
        {
            name: 'reverse',
            type: ['Boolean'],
            default: 'false',
            description: 'Order the content in reverse order inside the row'
        },
        {
            name: 'reverse-xs',
            type: ['Boolean'],
            default: 'false',
            description: 'Order the content in reverse order inside the row on extra-small screens'
        },
        {
            name: 'reverse-sm',
            type: ['Boolean'],
            default: 'false',
            description: 'Order the content in reverse order inside the row on small screens'
        },
        {
            name: 'reverse-md',
            type: ['Boolean'],
            default: 'false',
            description: 'Order the content in reverse order inside the row on medium screens'
        },
        {
            name: 'reverse-lg',
            type: ['Boolean'],
            default: 'false',
            description: 'Order the content in reverse order inside the row on large screens'
        },
        {
            name: 'reverse-xl',
            type: ['Boolean'],
            default: 'false',
            description: 'Order the content in reverse order inside the row on extra-large screens'
        },
        {
            name: 'reverse-xxl',
            type: ['Boolean'],
            default: 'false',
            description:
                'Order the content in reverse order inside the row on extra-extra-large screens'
        },
        {
            name: 'no-gutter',
            type: ['Boolean'],
            default: 'false',
            description: 'Remove gutter between columns'
        },
        {
            name: 'no-collapse',
            type: ['Boolean'],
            default: 'false',
            description: 'Disable wrapping of columns'
        }
    ],
    events: [],
    slots: [
        {
            name: 'default',
            description: 'Slot for default row content '
        }
    ],
    css: {
        selector: '.row',
        variables: [
            {
                name: '--gutter-xs--gutter-xs',
                value: [
                    {
                        name: '--gutter-xs'
                    }
                ]
            },
            {
                name: '--gutter-sm--gutter-sm',
                value: [
                    {
                        name: '--gutter-sm'
                    }
                ]
            },
            {
                name: '--gutter-md--gutter-md',
                value: [
                    {
                        name: '--gutter-md'
                    }
                ]
            },
            {
                name: '--gutter-lg--gutter-lg',
                value: [
                    {
                        name: '--gutter-lg'
                    }
                ]
            },
            {
                name: '--gutter-xl--gutter-xl',
                value: [
                    {
                        name: '--gutter-xl'
                    }
                ]
            },
            {
                name: '--gutter-xxl--gutter-xxl',
                value: [
                    {
                        name: '--gutter-xxl'
                    }
                ]
            }
        ]
    }
};

export default manifest;
